<!--  -->
<template>
    <view>
        <view class="choose-datetime" @tap="openStarDate" v-if="!isFilter">
            <view> {{ dateRange }}<iconsfont customIcons="icon-xiangxia1" class="icon" size="20"></iconsfont> </view>
        </view>
        <view class="time-wrapper" @tap="openStarDate" v-else-if="!separate">
            <view class="start-time" :class="{ 'has-time': startDate }">{{ startDate || "请选择时间" }}</view>
            <view class="zhi">至</view>
            <view class="end-time" :class="{ 'has-time': startDate }">{{ endDate || "请选择时间" }}</view>
        </view>
		<view class="time-wrapper" v-else>
			<view class="start-time" @tap="openStart" :class="{ 'has-time': startDate }">{{ startDate || "请选择时间" }}</view>
			<view class="zhi">至</view>
			<view class="end-time" @tap="openEnd" :class="{ 'has-time': endDate }">{{ endDate || "请选择时间" }}</view>
		</view>

        <!-- 时间选择 -->
        <uni-calendar
            v-if="isShow"
            :defaultRange="dates"
            ref="calendar"
            :range="true"
            :insert="false"
            @confirm="confirmStarDate"
            @close="close">
        </uni-calendar>
		<uni-calendar :date="startDate" ref="startDate" :insert="false" @confirm="confirmStart"></uni-calendar>
		<uni-calendar :date="endDate" ref="endDate" :insert="false" @confirm="confirmEnd"></uni-calendar>
    </view>
</template>

<script>
export default {
    props: {
        startDate: {
            type: String,
            default: "",
        },
        endDate: {
            type: String,
            default: "",
        },
        isFilter: {
            type: Boolean,
            default: false,
        },
		separate: {
		    type: Boolean,
		    default: false,
		},
    },
    data() {
        return {
            show: true,
            mode: "range",
            dateRange: "请选择时间",
            dates: ["", ""],
            isShow: false,
        }
    },
    created() {
        this.dates[0] = this.startDate
        this.dates[1] = this.endDate
    },
    mounted() {
        if (this.dates[0]) {
            this.dateRange = this.startDate + " 至 " + this.endDate
        }
    },
    methods: {
        close() {
            this.isShow = false
        },
        openStarDate() {
            //打开选择开始日期
            this.isShow = true
            setTimeout(() => {
                this.$refs.calendar.open()
            }, 300)
        },
		openStart(){
			this.$refs.startDate.open()
		},
		openEnd(){
			this.$refs.endDate.open()
		},
        confirmStarDate(e) {
            let data
            if (e.range.data.length) {
                data = e.range.before + "," + e.range.after
                this.dateRange = e.range.before + " 至 " + e.range.after
            } else {
                data = e.fulldate
                this.dateRange = e.fulldate
            }
            this.$emit("selDate", data)
            this.isShow = false
        },
		confirmStart(e){
			this.$emit("selStartDate", e.fulldate)
		},
		confirmEnd(e){
			this.$emit("selEndDate", e.fulldate)
		},
    },
    watch: {
        startDate(newVal) {
            this.startDate = newVal
            this.dates[0] = this.startDate
        },
        endDate(newVal) {
            this.endDate = newVal
            this.dates[1] = this.endDate
        },
    },
}
</script>
<style lang="scss" scoped>
.choose-datetime {
    height: 30px;
    line-height: 30px;
    margin: 0 $app-page-padding 0;
    border-radius: 20rpx;
    font-size: $size-28;
    display: inline-flex;
    align-items: center;
    .icon {
        color: #434c67;
        margin-left: 8rpx;
    }
}

.time-wrapper {
    display: flex;
    align-items: center;
    margin-bottom: 32rpx;
    font-size: 28rpx;

    .start-time,
    .end-time {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 260rpx;
        height: 72rpx;
        background: #f6f6f6;
        border-radius: 8rpx;
        color: $color-gray-3;
    }

    .has-time {
        color: $color-gray-1;
    }

    .zhi {
        margin: 0 22rpx;
    }
}
</style>
